(function (Vue) { // 表示依赖了全局的Vue
	// ffff
	const items = [{
			id: 1, // 主键
			content: 'vue js',
			completed: false // 是否完成
		},
		{
			id: 2, // 主键
			content: 'java',
			completed: false // 是否完成
		},
		{
			id: 3, // 主键
			content: 'python',
			completed: true // 是否完成
		}
	]

	// 注册全局指令
	// 指令名不要加上v-，在引用这个指令的时候才加上v-
	Vue.directive('app-focus', {
		inserted (el, binding) {
			// 聚焦元素
			el.focus()
		}
	})

	var app = new Vue({
		el: '#todoapp',
		data: {
			// ES6写法
			items,
			currentItem: null,
			filterStatus: 'all' //接收变化的那个值
		},
		// 自定义局部指令
		directives: {
			'todo-focus': {
				update (el, binding) {
					// 只有双击的那个元素才获取焦点
					if (binding) {
						el.focus()
					}
				}
			}
		},
		// 定义函数
		methods: {
			// ES6写法，等价于addItem:function(){}
			addItem(event) {
				// 1.获取文档中的内容
				const content = event.target.value.trim()
				// 2.判断文字是否为空，为空，什么都不做
				if (!content.length) { // 0=false
					return
				}
				// 3.不为空则添加到items中
				const item = {}
				item.id = items.length + 1
				item.content = content
				item.completed = false
				items.push(item)
				// 4.清空文本输入框的内容
				event.target.value = ''
			},
			// 删除元素
			removeItem(index) {
				// 移除索引为index的一条数据
				this.items.splice(index, 1)
			},
			// 移除完成的元素
			removeCompleted() {
				this.items = this.items.filter(item => !item.completed)
			},
			// 进入编辑状态
			toEdit(item) {
				this.currentItem = item
			},
			// 取消编辑
			cancelEdit() {
				this.currentItem = null
			},
			// 完成编辑，保存数据
			finishEdit(item, index, event) {
				// 1.获取当前输入的值，
				const content = event.target.value.trim()
				// 2.判断输入框的值是否为空，为空就删除当前任务项
				if(!content){
					this.removeItem(index)
					return
				}
				// 3.不为空就更新原有的任务项的content值
				item.content = content
				// 4.移除.editing样式，退出编辑状态
				this.currentItem = null
			}
		},
		// 计算属性
		computed: {
			remaining() {
				return this.items.filter(item => {
					return !item.completed
				}).length
			},
			// 是否全选
			toggleAll: {
				// 当任务列表中的状态发生变化时，就更新复选框中的状态
				get() {
					return this.remaining === 0
				},
				// 当复选框中的状态更新后，则将任务列表中的状态更新
				set(newvalue) {
					console.log('set methods')
					// 迭代数组中的元素，将复选框的值赋值给元素
					this.items.forEach(item => {
						item.completed = newvalue
					})
				}
			},
			// 状态一旦改变，就会将hash赋值给filterStatus
			// 定义一个计算属性filterItems来感知filterStatus的变化,当它改变后，来过滤不同的数据
			filterItems() {
				switch (this.filterStatus) {
					case 'active':
						// 过滤未完成的数据
						return this.items.filter(item => !item.completed)
						break;
					case 'completed':
						// 过滤完成的数据
						return this.items.filter(item => item.completed)
						break;
					default:
						// 返回全部数据
						return this.items
						break;
				}
			}
		}
	})
	// 要写在vue实例外面
	// 当路由hash值发生变化之后，会自动调用该函数
	window.onhashchange = function() {
		// #/active
		console.log('路由HASH值变化了：' + window.location.hash)
		// 获取路由的hash，当截取的hash值不为空时则返回，为空返回all
		const hash = window.location.hash.substr(2) || 'all'
		// 状态一旦改变，就会将hash赋值给filterStatus
		// 定义一个计算属性filterItems来感知filterStatus的变化,当它改变后，来过滤不同的数据
		app.filterStatus = hash
	}
	// 第一次访问页面就生效
	window.onhashchange()

})(Vue);
